<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用结构元素进行网页布局</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<style>
<!--网页的宽度和对齐方式-->
.main{
width: 1000px;
margin: 40px auto;
}
<!--导航的宽度、高度和整体样式-->
.main nav{
width: 1000px;
height: 40px;
background: #999;
/*背景颜色*/
border-radius: 5px;
/*圆角边框半径*/
}
<!--导航个栏目的宽度、高度和对齐方式-->
.main nav li{
width: 70px;
height: 40px;
float: left;  /*向左浮动*/
text-align: center;
line-height: 40px;
/*行高为40px*/
}
<!--超链接初始状态的样式-->
.main nav ul li a{
color: #fff
font-family:"微软雅黑";
font-size: 14px;
}
<!--超链接鼠标悬停的样式-->
.main nav ul li a:hover{
font-weight: bold;
/*字体加粗*/
}
<!--娱乐新闻模块的CSS规则-->
.main.block1{
width: 430px;
height: 250px;
margin-top: 20px;
/*上外边距*/
float:left;  /*向左浮动*/
}
<!--军事新闻模块的CSS规则-->
.mian.block2{
width: 430px;
height: 250px;
margin-top: 20px;
float: right;  /*向右浮动*/
}
<!--娱乐新闻和军事新闻模块中标题的样式-->
.mian.block1 h1,
.mian.block2 h1{
color: #333;  /*字体颜色*/
font-size: 20px;
/*字体大小*/
font-family: "微软雅黑";
line-height: 50px;
/*行高50px*/
text-indent: lem;
}
<!--列表规则-->
.mian.block1 ul,
.mian.block2 ul{
width: 390px;
margin:0 19px 10px 19px;/*上、右、下、左的外边距依次为0px 19px 10px 19px*/
}
<!--列表各项高度和宽度-->
.mian.block1.ul li,
.mian.block2.ul li{
width: 390px;
height: 40px;
}
<!--列表各项的文字样式-->
.mian.block1 ul li a,
.mian.block1 ul li time,
.mian.block2 ul li a,
.mian.block2 ul li time{
color: #333;
font-size: 14px;
font-family: "微软雅黑";
line-height: 40px;
}
.main.block1 ul li a,
.mian.block2 ul li a{
float: left;
}
.mian.block1 ul li a:hover,
.mian.block2 ul li a:haver{
color: red;  /*鼠标悬停的字体的颜色为红色*/
}
.mian.block1 ul time,
.mian.block2 ul time{
float: right;
}
<!--页面底部的CSS规则-->
footer{
clear: both;  /*清除两边的浮动*/
width: 1000px;
height: 200px;
margin: 0 auto;
text-align: center;
}
footer h1 span{
margin-right: 20px;
/*右边边距*/
}
footer h1 span a{
color: #333;
font-family: "微软雅黑";
font-size: 14px;
line-height: 200px;
}
footer h1 span a:hover{
color: red;
}
</style>
<body>
<div class="main">
<p><a id=FileTop></a></p>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#" style="color:#EF2D36;">新闻</a></li>
<li><a href="#">体育</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">财经</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">军事</a></li>
</ul>
</nav>
</header>
<div class="block1">
<section>
<h1>娱乐新闻</h1>
<ul>
<li><a href="#">香港古惑仔齐聚</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">香港古惑仔齐聚</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">香港古惑仔齐聚</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">香港古惑仔齐聚</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">香港古惑仔齐聚</a><time datetime="2017-3-7">2017-3-7</time></li>
</ul>
</section>
</div>
<div class="block2">
<section>
<h1>军事新闻</h1>
<ul>
<li><a href="#">韩国签订部署萨德引中方全民反对</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">韩国签订部署萨德引中方全民反对</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">韩国签订部署萨德引中方全民反对</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">韩国签订部署萨德引中方全民反对</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">韩国签订部署萨德引中方全民反对</a><time datetime="2017-3-7">2017-3-7</time></li>
</ul>
</section>
</div>
<div class="block1">
<section>
<h1>体育新闻</h1>
<ul>
<li><a href="#">勇士做客亚特兰大</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">勇士做客亚特兰大</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">勇士做客亚特兰大</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">勇士做客亚特兰大</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">勇士做客亚特兰大</a><time datetime="2017-3-7">2017-3-7</time></li>
</ul>
</section>
</div>
<div class="block2">
<section>
<h1>财经新闻</h1>
<ul>
<li><a href="#">A股继续上涨</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">A股继续上涨</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">A股继续上涨</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">A股继续上涨</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">A股继续上涨</a><time datetime="2017-3-7">2017-3-7</time></li>
</ul>
</section>
</div>
</div>
<footer>
<h1><span><a href="#">关于我们</a></span><span><a href="#">联系我们</a></span></h1>
</footer>
</body>
</html>